<template>
	<view class="binding_tel">
		<!-- <view class="back">
			<view class="icons" @click.stop="back">
				<uni-icons type="back" size="32"></uni-icons>
			</view>
		</view> -->
		
		<topTitle :styles="{back:true,title:'登录',color:'#000',bgColor:'none'}" />
		
		<view class="title">
			手机快捷登录
			<view class="desc">
				未注册过的手机将自动创建账号
			</view>
		</view>
		<view class="form">
			<view class="tel">
				<input type="text" maxlength="11" v-model="tel" placeholder="请输入手机号" placeholder-class="placeholderClass" />
			</view>
			<view class="tel_code">
				<input type="text" v-model="code" placeholder="请输入验证码" placeholder-class="placeholderClass" />
				<view class="get_code" v-if="getFlag" @click="getCode">{{get_text}}</view>
				<view class="get_code" v-else>{{time}}秒后获取</view>
			</view>
		</view>
		<view class="submit" @click="submit">
			<!-- <uni-icons type="phone-filled" size="25" color="#fff"></uni-icons> -->
			<view class="icon">
				<image src="/static/images/telephone.png" mode=""></image>
			</view>
			<text>登录</text>
		</view>
		<view class="footer">
		<!-- 	<label class="radio">
				<radio color="rgb(58, 232, 144)"  @click="changeRaido" value="1" :checked="raido" />
			</label> -->
			<view>
				注册登录即同意
				<text class="jump" @click="jump(4)">《用户协议》</text>
				<text class="jump" @click="jump(5)">《隐私声明》</text> 
			</view>
		</view>
	</view>
</template>

<script>
	import topTitle from "@/components/topTitle.vue"
	export default {
		components:{
			topTitle
		},
		data() {
			return {
				title:'',
				tel: '',
				code: '',
				get_text: "获取验证码",
				getFlag: true,
				time: 60,
				token: "",
				raido:true,
				spread_user_id:'',
				channel_id:'',
				force_login:false,
				phone_login:false,
			};
		},
		onLoad(option) {
			this.getForce()
			this.spread_user_id = uni.getStorageSync('spread_user_id');
			this.channel_id = uni.getStorageSync('channel_id');
			if (option.token) {
				this.token = option.token
			}
		},
		methods: {
			//强制登录配置
			getForce(){
				this.$http({
					url:'/api/config',
					method:'get',
					success:result=>{
						console.log(result,'------------------------getForce')
						this.force_login = result.data.force_login
						this.phone_login = result.data.phone_login
						// #ifdef H5
						if(!this.phone_login){
							uni.reLaunch({
								url:'/pages/login/index'
							})
						}
						// #endif
					}
				})
			},
			//跳转协议
			jump(i){
				uni.navigateTo({
					url:`/pages/my/agreement/agreement?infoId=${i}`
				})
			},
			//是否同意隐私政策
			changeRaido(){
				this.raido = !this.raido
			},
			//回退
			back(){
				uni.navigateBack()
			},
			//获取验证码
			getCode() {
				if (this.tel == "") {
					uni.showToast({
						title: '请输入手机号',
						icon: "none"
					})
					return false;
				}
				this.getFlag = false
				var timer = setInterval(() => {
					this.time--
					if (this.time == 0) {
						clearInterval(timer)
						this.time = 60
						this.getFlag = true
					}
				}, 1000)
				// uni.setStorageSync('token',this.token)
				this.$http({
					url: '/api/get_code',
					method: 'post',
					data: {
						phone: this.tel,
						type: "login"
					},
					success: result => {
						console.log(result)
						// uni.removeStorageSync('token')
					}
				})
			},
			//提交绑定
			submit() {
				let that = this;
				if (this.tel == "") {
					uni.showToast({
						title: '请输入手机号',
						icon: "none"
					})
					return false;
				}
				if (this.code == "") {
					uni.showToast({
						title: '请输入验证码',
						icon: "none"
					})
					return false;
				}
				if(!this.raido){
					uni.showToast({
						title:'请查看并同意用户协议与隐私政策',
						icon:"none"
					})
					return false;
				}
				// #ifdef H5
				// uni.getLocation({
				// 	type: 'gcj02',
				// 	isHighAccuracy:true,
				// 	highAccuracyExpireTime:1000,
				// 	success: (res) => {
				// 		console.log(res, '----------------------获取地址res')
				// 		//这里的代码
				// 	}
				// })
				
				let params = {
					phone: this.tel,
					code: this.code,
					spread_user_id:this.spread_user_id,
					channel_id:this.channel_id,
					// latitude:res.latitude,
					// longitude:res.longitude,
				}
				console.log(params,'---------------------params')
				that.$http({
					url: '/api/login/phone',
					method: 'post',
					data:params,
					success: result => {
						console.log(result,'-------------------登录')
						if (result.code == 200) {
							uni.showToast({
								title: '登录成功'
							})
							uni.setStorageSync('token',result.data.token)
							
							setTimeout(() => {
								if(uni.getStorageSync('order_url')){
									let url = uni.getStorageSync('order_url');
									window.location.href = url;
									uni.removeStorageSync('order_url')
								}else{
									uni.switchTab({
										url: '/pages/my/index'
									})
								}
								
							}, 1500)
						}
					}
				})
				// #endif
				// #ifdef APP-PLUS
				let locationType = '';
				if (uni.getSystemInfoSync().platform =='android') { //android终端
					locationType = 'gcj02'
				} else if (uni.getSystemInfoSync().platform == "ios") { //ios终端
					locationType = 'wgs84'
				}
				console.log(locationType,'--------------------------locationType')
				// navigator.geolocation.getCurrentPosition((res) => {
				// 	let params = {
				// 		phone: this.tel,
				// 		code: this.code,
				// 		spread_user_id:this.spread_user_id,
				// 		channel_id:this.channel_id,
				// 		latitude:res.coords.latitude,
				// 		longitude:res.coords.longitude,
				// 	}
				// 	console.log(params,'---------------------params')
				// 	that.$http({
				// 		url: '/api/login/phone',
				// 		method: 'post',
				// 		data:params,
				// 		success: result => {
				// 			console.log(result,'-------------------登录')
				// 			if (result.code == 200) {
				// 				uni.showToast({
				// 					title: '登录成功'
				// 				})
				// 				uni.setStorageSync('token',result.data.token)
								
				// 				setTimeout(() => {
				// 					if(uni.getStorageSync('order_url')){
				// 						let url = uni.getStorageSync('order_url');
				// 						window.location.href = url;
				// 						uni.removeStorageSync('order_url')
				// 					}else{
				// 						uni.switchTab({
				// 							url: '/pages/my/index'
				// 						})
				// 					}
									
				// 				}, 1500)
				// 			}
				// 		}
				// 	})
				
				// }, function(error) {
				// 	uni.showToast({
				// 		title: '加载失败,请刷新重试',
				// 		icon: "none"
				// 	})
				// });
				uni.getLocation({
					type:locationType,
					geocode:true,
					success: (res) => {
						console.log(res, '----------------------获取地址res')
						let params = {
							phone: this.tel,
							code: this.code,
							spread_user_id:this.spread_user_id,
							channel_id:this.channel_id,
							latitude:res.latitude,
							longitude:res.longitude,
						}
						console.log(params,'---------------------params')
						that.$http({
							url: '/api/login/phone',
							method: 'post',
							data:params,
							success: result => {
								console.log(result,'-------------------登录')
								if (result.code == 200) {
									uni.showToast({
										title: '登录成功'
									})
									uni.setStorageSync('token',result.data.token)
									
									setTimeout(() => {
										if(uni.getStorageSync('order_url')){
											let url = uni.getStorageSync('order_url');
											window.location.href = url;
											uni.removeStorageSync('order_url')
										}else{
											uni.switchTab({
												url: '/pages/my/index'
											})
										}
										
									}, 1500)
								}
							}
						})
					}
				})
				// #endif
				
			},
		}
	}
</script>
<style>
	page {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	
	.binding_tel {
		width: 100%;
		height: 100%;
		// padding: 150px 0;
		// box-sizing: border-box;
		position: relative;
		background-image: linear-gradient(#e5fff7, #fff);
		.back{
			position: absolute;
			top: 0;
			left: 0;
			z-index: 9999;
			width: 100%;
			height: 79px;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: flex-start;
			.icons{
				padding: 5px 5px;
			}
		}
		.title{
			margin-top: 100px;
			padding: 0 30px;
			font-size: 28px;
			font-weight: bold;
			.desc{
				font-size: 14px;
				margin-top: 15px;
				font-weight: normal;
				color:#666;
			}
		}
		.form {
			margin: 100px 30px;
			margin-top: 50px;
			>view {
				height: 44px;
				// line-height: 55px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #fff;
				border-radius: 44px;
				margin: 20px 0;
				font-size: 14px;
				>input {
					flex: 1;
					padding-left: 20px;
				}

				>text {
					width: 100px;
				}

				.get_code {
					width: 95px;
					height: 30px;
					line-height: 30px;
					color: #10C77C;
				}

				.placeholderClass {
					font-size: 13px;
					color: rgb(153, 153, 153);
				}
			}
		}

		.submit {
			margin: 0 80px;
			height: 50px;
			color: #fff;
			background-color: #10C77C;
			font-size: 17px;
			font-weight: bold;
			border-radius: 35px;
			justify-content: center;
			align-items: center;
			display: flex;
			>text{
				margin-left: 5px;
			}
			.icon{
				width: 22px;
				height: 24px;
				>image{
					width: 100%;
					height: 100%;
				}
			}
		}
		.footer{
			width: 100%;
			position: absolute;
			bottom: 60upx;
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 28.6upx;
			font-size: 28upx;
			// color:;
			.jump{
				color: #11c87c;
			}
		}
	}
</style>
